<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>智慧实验室大数据</title>

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style2.0.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        })

    </script>
</head>

<body>
    <!--头部-->
    <header id="header">
        <div class="header">
            <h1 class=""><a href="" style="color: white">智慧实验室大数据</a></h1>
        </div>
    </header>

    <!--内容-->
    <section id="data_content">

        <div class="data_info">
            <div class="info_1 fl">
                <div class="text_1">
                    <div class="fl">
                        <img src="images/info_1.png" alt="更多资源：">
                        <div class="fl count">
                            <p>今日预约(人)</p>
                            <p class="conuts">81</p>
                        </div>
                    </div>
                    <div class="fl">
                        <img src="images/info_2.png" alt="更多资源：">
                        <div class="fl count">
                            <p>预约人数(人)</p>
                            <p class="conuts">130</p>
                        </div>
                    </div>
                    <div class="fl">
                        <img src="images/info_3.png" alt="更多资源：">
                        <div class="fl count">
                            <p>本院人数(人)</p>
                            <p class="conuts">78</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="info_2 fl">
                <div class="text_2">
                    <div class="fl">
                        <img src="images/info_4.png" alt="更多资源：">
                        <div class="fl count">
                            <p>实验室利用率(%)</p>
                            <p class="conuts">83</p>
                        </div>
                    </div>
                    <div class="fl">
                        <img src="images/info_5.png" alt="更多资源：">
                        <div class="fl count">
                            <p>空气质量</p>
                            <p class="conuts">良</p>
                        </div>
                    </div>
                    <div class="fl">
                        <img src="images/info_4.png" alt="更多资源：">
                        <div class="fl count">
                            <p>用电量(kw/h)</p>
                            <p class="conuts">1,005</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="info_3 fr">
                <div class="text_2">
                    <div class="fl">
                        <img src="images/info_3.png" alt="更多资源：">
                        <div class="fl count">
                            <p>外部人员(人)</p>
                            <p class="conuts">52</p>
                        </div>
                    </div>
                    <div class="fl">
                        <img src="images/info_6.png" alt="更多资源：">
                        <div class="fl count">
                            <p>违规情况(件)</p>
                            <p class="conuts">3</p>
                        </div>
                    </div>
                    <div class="fl">
                        <img src="images/info_7.png" alt="更多资源：">
                        <div class="fl count">
                            <p>设备报警(个)</p>
                            <p class="conuts">5</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="data_content">
            <!--左边-->
            <div class="data_left fl">
                <div class="left_top">
                    <!--/*左边第一部分*/-->
                    <div class="info public">
                        <div class="min-title">
                            <span>公告通知</span>
                        </div>
                        <div class="echart wenzi">
                            <div class="gun">
                                <span style="width: 10%;">序号</span>
                                <span style="width: 70%;">通知内容</span>
                                <span style="width: 20%;">发布时间</span>
                            </div>
                            <div id="FontScroll" class="myscroll">
                                <ul>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">1、</span>
                                            <span style="width: 70%;">【通知】2025农历新年放假通知</span>
                                            <span style="width: 20%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">2、</span>
                                            <span style="width: 70%;">【公告】奉综合实验室201设备维修，暂停开放</span>
                                            <span style="width: 20%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">3、</span>
                                            <span style="width: 70%;">【通知】2025年元旦放假通知</span>
                                            <span style="width: 20%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">4、</span>
                                            <span style="width: 70%;">【公告】2025上半学年考试安排</span>
                                            <span style="width: 20%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">5、</span>
                                            <span style="width: 70%;">【公告】奉化学楼508设备维修，暂停开放</span>
                                            <span style="width: 20%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">6、</span>
                                            <span style="width: 70%;">【公告】奉化学楼201设备维修，暂停开放</span>
                                            <span style="width: 20%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                


                                </ul>
                            </div>
                        </div>
                        <div class="boxfoot"></div>
                    </div>
                    <!--左边第二部分-->
                    <div class="top_bottom public">
                        <div class="min-title">
                            <span>耗材</span>
                        </div>
                        <div id="echarts_1" style="width:100%;height: 100%;"></div>
                        <div class="boxfoot"></div>
                    </div>
                    <!--左边第三部分-->
                    <div class="left_bottom public">
                        <div class="min-title">
                            <span>实验教务</span>
                        </div>
                        <div id="echarts_2" style="width:100%;height: 100%;padding-top: 3%;"></div>
                        <div class="boxfoot"></div>
                    </div>
                </div>
            </div>
            <!--中间-->
            <div class="data_c fl">
                <div class="data_c_1">


                    <div id="contPar" class="contPar">
                        <div id="page1" style="z-index:1">
                            <div class="title0">智慧实验室大数据</div>
                            <div class="title1">危化品、耗材、物联网、安全、大数据</div>


                            <div id="drag-container" style="z-index: 1">
                                <div id="spin-container">

                                    <img alt="更多资源：" class="infoBtn" src="picture/page1_0.png">
                                    <img alt="更多资源：" class="" src="picture/page1_1.png">
                                    <img alt="更多资源：" class="" src="picture/page1_2.png">
                                    <img alt="更多资源：" class="" src="picture/page1_1.png">
                                    <img alt="更多资源：" class="" src="picture/page1_2.png">

                                </div>
                                <div id="ground"></div>
                            </div>

                            <img alt="更多资源：" class="img3 png" src="images/newdz.png">
                        </div>
                    </div>


                </div>
                <div class="data_c_2 public">

                    <div id="echart4" style="width: 100%;height: 100%;padding-top: 10px;"></div>
                    <div class="boxfoot"></div>
                </div>
            </div>
            <!--右边-->
            <div class="data_right fr">
                <div class="right_top">
                    <!--/*右边第一部分*/-->
                    <div class="right_info public">
                        <div class="min-title">
                            <span>代办事项</span>
                        </div>
                        <div class="echart wenzi">
                            <div class="gun">
                                <span style="width: 10%;">序号</span>
                                <span style="width: 50%;">项目内容</span>
                                <span style="width: 18%;">状态</span>
                                <span style="width: 20%;">项目时间</span>
                            </div>
                            <div id="FontScroll" class="myscroll">
                                <ul>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">1、</span>
                                            <span style="width: 50%;">【实验室预约】陈怡预约奉化学楼101</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 10:20:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">2、</span>
                                            <span style="width: 50%;">【实验室预约】李莉预约奉化学楼101</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 11:00:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">3、</span>
                                            <span style="width: 50%;">【实验室预约】王丽预约奉化学楼201</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 10:00:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">4、</span>
                                            <span style="width: 50%;">【实验室预约】张磊预约奉化学楼201</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 11:00:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">5、</span>
                                            <span style="width: 50%;">【实验室预约】天宇预约奉化学楼301</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 12:00:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">6、</span>
                                            <span style="width: 50%;">【实验室预约】丁力预约奉化学楼301</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 14:00:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">7、</span>
                                            <span style="width: 50%;">【实验室预约】李旺预约奉化学楼301</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 14:50:00</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="fontInner clearfix">
                                            <span style="width: 10%;">8、</span>
                                            <span style="width: 50%;">【实验室预约】李静预约奉化学楼301</span>
                                            <span style="width: 18%;">待处理</span>
                                            <span style="width: 22%;">2025-03-06 15:30:00</span>
                                        </div>
                                    </li>


                                </ul>
                            </div>
                        </div>

                        <div class="boxfoot"></div>
                    </div>
                    <!--右边第二部分-->
                    <div class="right_content public">
                        <div class="min-title">
                            <span>实验室实时人数</span>
                        </div>
                        <div id="chart_3" style="width:100%;height: 100%;"></div>
                        <div class="boxfoot"></div>
                    </div>
                    <!--右边第三部分-->
                    <div class="right_bottom public">
                        <div class="min-title">
                            <span>实验室使用热度分析</span>
                        </div>
                        <div id="chart_2" style="width:100%;height: 100%;padding-top: 10px;"></div>
                        <div class="boxfoot"></div>
                    </div>
                </div>
            </div>



        </div>
    </section>

    <script src="js/script.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/echart.js"></script>
    <!--<script type="text/javascript" src="js/com.js"></script>-->
    <script src="js/index.js"></script>
    <script src="js/fontscroll.js"></script>


</body>

</html>